<template>
  <el-row :gutter="20">
    <el-col :span="18">
      <el-button type="success" icon="el-icon-plus" size="small" @click="dialogVisible=true" round>新项目</el-button>
      <div v-for="project in projects">
        <router-link :to="{ path: '/project/home', query: { id: project.id }}">{{ project.name}}</router-link>
      </div>

      <el-dialog
        title="新项目"
        :visible.sync="dialogVisible"
        width="50%"
        :before-close="handleClose">
        
        <el-form ref="form" :rules="rules" :model="form" label-width="80px">
          <el-form-item label="名称"  prop="name">
            <el-input v-model="form.name"></el-input>
          </el-form-item>
          <el-form-item label="描述" prop="desc">
            <el-input type="textarea" v-model="form.desc"></el-input>
          </el-form-item>
        </el-form>

        <span slot="footer" class="dialog-footer">
          <el-button size="small" @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" size="small" @click="submit('form')">确 定</el-button>
        </span>
      </el-dialog>
    </el-col>
    <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
  </el-row>
</template>

<script>
import axios from 'axios'
export default {
  name: 'home',
  data () {
    return {
      projects: [],
      dialogVisible: false,
      form: {
        name: '',
        desc: ''
      },
      rules: {
        name: [
          { required: true, message: '请输入项目名称', trigger: 'blur' },
          { max: 64, message: '长度小于64个字符', trigger: 'blur' }
        ],
        desc: [
          {max: 512, message: '长度小于512个字符', trigger: 'blur'}
        ]
      }
    }
  },
  methods: {
    handleClose (done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done()
        })
        .catch(_ => {})
    },
    submit: function (formName) {
      let page = this
      this.$refs[formName].validate((valid) => {
        if (valid) {
          let name = this.form.name
          let desc = this.form.desc
          axios.post('api/project/add', {
            name: name,
            desc: desc
          })
          .then(function (response) {
            if (response.data.code === 0) {
              page.$message({
                message: '添加项目成功',
                type: 'success'
              })
              page.dialogVisible = false
              page.$router.push({name: 'PHome', query: {id: response.data.id}})
            }
            console.log(response)
          })
          .catch(function (error) {
            console.log(error)
          })
          console.log(this.form)
        } else {
          console.log('error submit!!')
          return false
        }
      })
    }
  },
  mounted: function () {
    const page = this
    window.axios.get('api/home')
    .then(function (response) {
      page.projects = response.data.projects
    })
    .catch(function (error) {
      console.log(error)
    })
  }

}
</script>

<style>
  .el-row {
    margin-bottom: 20px;
    &:last-child {
      margin-bottom: 0;
    }
  }
  .el-col {
    border-radius: 4px;
  }
  .bg-purple-dark {
    background: #99a9bf;
  }
  .bg-purple {
    background: #d3dce6;
  }
  .bg-purple-light {
    background: #e5e9f2;
  }
  .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }
  .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
  }
</style>